<script setup>
import { ref } from "vue";
import request from "../utils";
// 初始数据为"Nothing here"
let data1 = ref("Nothing here");
let data2 = ref("Nothing here");

const getData = async () => {
  // 从Mockjs生成的虚拟路径下请求数据 也可以携带参数过去路由
  const { data: res1 } = await request("/api/user", "POST", {
    name: "request1",
  });
  // 将请求返回的数据给到data1
  data1.value = res1;
  const { data: res2 } = await request("/api/info", "POST", {
    name: "request2",
  });
  // 将请求返回的数据给到data2
  data2.value = res2;
};
</script>

<template>
  <h1>使用 MOCKJS 实现虚拟数据和虚拟路由的创建</h1>
  <hr />
  <h2>获取到的 MockJS 虚拟数据如下</h2>
  <h2>MOCKJS虚拟路由的数据1 - {{ data1 }}</h2>
  <h2>MOCKJS虚拟路由的数据2 - {{ data2 }}</h2>

  <button @click="getData">点击通过MOCKJS获取虚拟数据</button>
</template>

<style scoped>
button {
  height: 32px;
  width: 290px;
  font-size: 18px;
  font-weight: 600;
}
</style>
